<script setup>
//import {excelApi} from "../../../api/axios";
//import {MINIO_HOST} from "../../../const";
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {
  dateFormat,
  myRemove,
  myPage,
  myRemoveBatch,
  getResponseData,
  clazzStatusFormat, elConfirm, isNotNull
} from "../../../util";
import {pageApi, removeApi, removeBatchApi} from "../../../api/schedule.js";
import {listClazzNameApi} from "../../../api/clazz.js";
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import MyPager from "../../../components/MyPager.vue";
import MyList from "../../../components/MyList.vue";
import {ElDialog, ElMessage, ElDatePicker} from "element-plus";

import { ElMessageBox } from 'element-plus'

// 获取当前课程记录
let course = JSON.parse(sessionStorage.getItem('course'));
course.mapClazzNameList = ref([])

/* ==================== 分页查询 ==================== */
// 表格数据 + 分页数据
let records = ref();
let pageInfo = shallowReactive({'pageNum': 1, 'pageSize': 10, 'fn': page});
// 分页查询条件字段：排课名称
let clazzName = shallowRef();
let directionId = shallowRef();
let status = shallowRef();

// 分页函数
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  // 分页基础配置
  let config = {
    'api': pageApi,
    'params': {'pageNum': pageNum, 'pageSize': pageSize, 'courseId': course.id},
    'records': records,
    'pageInfo': pageInfo
  }

  // 附加为分页条件
  if (status.value !== null) config['params']['status'] = status.value;
  // 发送分页请求
  await myPage(config);
}

/* ==================== 查询要完成本门课学习的班级名称 ==================== */
async function listClazzName() {
  let params = course.mapClazzIds.join(",")
  listClazzNameApi(params).then(res => {
    const data = getResponseData(res)
    Array.prototype.push.apply(course.mapClazzNameList.value, data)
    // course.mapClazzNameList.value.push(...data)
    /*for (let i in data) {
      course.mapClazzNameList.value.push(data[i])
    }*/
  })
}

/* ==================== 查看详情 ==================== */
// 排课详情抽屉 + 排课详情列表数据
let detailDrawer = shallowRef();
let detailItems = ref();


let statusItems = [
  {'label': '未开始', 'value': 0},
  {'label': '进行中', 'value': 1},
  {'label': '已结束', 'value': 2}
];

function detail(record) {
  detailItems.value = [
    {'label': '开始时间', 'value': record['startTime'], 'format': dateFormat},
    {'label': '结束时间', 'value': record['endTime'], 'format': dateFormat},
    {'label': '学时数', 'value': record['hours']},
    {'label': '状态', 'value': record['status'], format: scheduleStatusFormat, type: 'tag', tagTypeFn: status=>{
        if (status === 0 || status === '0') return 'warning';
        if (status === 1 || status === '1') return 'success';
        if (status === 2 || status === '2') return 'danger';
        return 'default';
      }},
    {'label': '排课描述', 'value': record['info'], 'type': 'card'}
  ];
  detailDrawer.value = true;
}


/* ==================== 单条添加 ==================== */
function insert() {
  router.push('/ScheduleInsert');
}
/* ==================== 批量添加 ==================== */
function batchInsert() {
  router.push('/ScheduleBatchInsert');
}


/* ==================== 单条修改 ==================== */
function update(row) {
  sessionStorage.setItem('schedule', JSON.stringify(row));
  router.push('/ScheduleUpdate');
}

/* ==================== 跳转到考勤页 ==================== */
function checkAttendance(row) {
  sessionStorage.setItem('schedule', JSON.stringify(row));
  router.push('/CheckAttendance');
}

/* ==================== 单条删除 ==================== */
function remove(row) {
  myRemove({'id': row['id'], 'api': removeApi, 'fn': page});
}

/* ==================== 批量删除 ==================== */
// 批量删除主键数组
let ids = [];

function selectionChange(rows) {
  ids = rows.map(e => e['id']);
}

function removeBatch() {
  myRemoveBatch({'ids': ids, 'api': removeBatchApi, 'fn': page})
}


/* ==================== 打印报表 ==================== */
function excel() {
  // excelApi('/clazz/excel', '排课统计表');
}


/* ==================== 按状态查询 ==================== */
function pageByStatus(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (isNotNull(val) || isNotNull(status.value)) {
    status.value = val;
    page();
  }
}

/* ==================== 加载函数 ==================== */
onMounted(() => {
  page()
  listClazzName()
});

function handleDateChange(value) {
  // 处理日期选择变化
  console.log(value);
}

function scheduleStatusFormat(status) {
  if (status === 0 || status === '0') return '未开始';
  if (status === 1 || status === '1') return '进行中';
  if (status === 2 || status === '2') return '已结束';
  return '其他';
}


</script>

<template>

<my-nav :items="[
  {'icon': 'Avatar', 'label': '课程管理'},
  {'icon': 'User', 'label': '排课列表'},
]"/>
<br/>
<!-- 课程描述 -->
<el-descriptions
    class="margin-top"
    :column="3"
    :size="'small'"
    border
>
  <el-descriptions-item>
    <template #label>
      <div class="cell-item">
        <el-icon :style="iconStyle">
          <iphone />
        </el-icon>
        课程名称
      </div>
    </template>
    {{ course.name }}
  </el-descriptions-item>
  <el-descriptions-item>
    <template #label>
      <div class="cell-item">
        <el-icon :style="iconStyle">
          <user />
        </el-icon>
        主讲老师
      </div>
    </template>
    {{course.teacherName}}
  </el-descriptions-item>
  <el-descriptions-item>
    <template #label>
      <div class="cell-item">
        <el-icon :style="iconStyle">
          <location />
        </el-icon>
        所属阶段
      </div>
    </template>
    {{ course.stageName }}
  </el-descriptions-item>
  <el-descriptions-item>
    <template #label>
      <div class="cell-item">
        <el-icon :style="iconStyle">
          <tickets />
        </el-icon>
        授课班级
      </div>
    </template>
    <el-tag type="success" v-for="clazzName in course.mapClazzNameList.value" >{{ clazzName }}</el-tag>
  </el-descriptions-item>
  <el-descriptions-item>
    <template #label>
      <div class="cell-item">
        <el-icon :style="iconStyle">
          <tickets />
        </el-icon>
        授课年级
      </div>
    </template>
    <el-tag type="primary" >{{ course.mapGradeList }}</el-tag>
  </el-descriptions-item>
  <el-descriptions-item>
    <template #label>
      <div class="cell-item">
        <el-icon :style="iconStyle">
          <office-building />
        </el-icon>
        备注
      </div>
    </template>
    {{ course.info }}
  </el-descriptions-item>
</el-descriptions>
<my-head :items="[
  {'type': 'opt', 'span': 5, 'placeholder': '按状态搜索', 'fn': pageByStatus, 'optItems': statusItems},
  {'type': 'insertBtn', 'offset': 15, 'fn': insert},
  {'type': 'batchInsertBtn', 'fn': batchInsert},
  {'type': 'deleteBtn', 'fn': removeBatch},
  {'type': 'excelBtn', 'fn': excel},
]"/>

<my-table v-if="records" :records="records" :columns="[
  {'column': ['排课信息', '开始时间'], 'property': 'startTime', 'width': 120, format: dateFormat},
  {'column': ['排课信息', '结束时间'], 'property': 'endTime', 'width': 120, format: dateFormat},
  {'column': ['排课信息', '学时数'], 'property': 'hours', 'width': 120},
  {'column': ['排课信息', '状态'], 'property': 'status', 'width': 120, format: scheduleStatusFormat, type: 'tag', 'tagTypeFn': status=>{
    if (status === 0 || status === '0') return 'warning';
    if (status === 1 || status === '1') return 'success';
    if (status === 2 || status === '2') return 'danger';
    return 'default';
  }},
  {'column': ['排课信息', '备注'], 'property': 'info', type: 'card'},
]" :buttons="[
  {'type': 'info', 'fn': detail},
  {'type': 'update', 'fn': update},
  {'btnLabel': '考勤', 'btnType': 'primary','btnIcon': 'star', 'fn': checkAttendance},
  {'type': 'delete', 'fn': remove}
]" :selection-change="selectionChange"/>

<my-pager v-if="records" :page-info="pageInfo"/>

<el-drawer v-model="detailDrawer" size="30%">
  <my-list title="记录详情" :items="detailItems"/>
</el-drawer>



</template>

<style scoped lang="scss">
  .el-tag {margin-right: 5px;}
</style>